<template>
    <div class="accountPage flex_column">
        <div class="flex_between">
            <!-- <div class="selectVue flex">
                <el-input v-model="key" placeholder="请输入你要搜索的关键字" style="width: 250px;" :clearable="true"></el-input>
                <div class="btn">搜索</div>
            </div> -->
            <div class="flex align_center">
                <div class="btnVue" style="width: 140px; margin-left: 0;" @click="toInvite">邀请团队子账号</div>
                <span class="tip">当前套餐：{{accountInfo.levelStr}}</span>
                <span class="tip">剩余微信：{{accountInfo.wechatNum}}个</span>
                <span class="tip">剩余token数：{{accountInfo.tokenNum}}</span>
            </div>   
            <div class="btnVue" @click="dialogTableVisible10=true">升级套餐</div>
        </div>

        <!-- 子账号列表 -->
        <div class="accountContent flex_1">
            <el-table :data="list" height="100%" border width="100%" class="center-table">
                <!-- 列表为空 -->
                <div slot="empty" class="flex_column align_center">
                    <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                    <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                </div>

                <!-- 账号 -->
                <el-table-column prop="userName" label="账号" width="200"></el-table-column>

                <!-- 账号类型 -->
                <el-table-column prop="isChild" label="账号类型">
                    <template slot-scope="scope">
                        <div class="flex_center">
                            {{ scope.row.isChild ? "子账号" : "主账号" }}
                        </div>
                    </template>
                </el-table-column>
                
                <!-- 分配微信数 -->
                <el-table-column  prop="wechatNum"  label="分配微信数"></el-table-column>

                <!-- 分配token数 -->
                <el-table-column  prop="tokenNum" label="分配token数"></el-table-column>
  

                <!-- 操作 编辑 删除 -->
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <div class="flex_center">
                            <el-button size="mini" type="manage" @click="handleManage(scope.row)">管理</el-button>
                            <el-button size="mini" type="delete" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="paginationVue flex_center align_center">
            <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total"></el-pagination>
        </div>


        <!-- 邀请团队子账号 -->
        <el-dialog title="邀请链接" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="25vh">
            <div class="dialogVue">
                <el-input v-model="link" readonly style="width: 100%; margin-top: 10px;"></el-input>
                <div class="createBtn margin40" @click="copyLink">
                    <span>复制链接</span>
                </div> 
            </div>
        </el-dialog>

        <serviceVue :dialogTableVisible10="dialogTableVisible10" title="联系客服微信" @beforeClose="dialogTableVisible10=false"></serviceVue>

         <!-- 管理子账号 -->
         <el-dialog title="管理子账号" :visible.sync="dialogTableVisible20" :show-close="true" :center="true" top="20vh">
            <div class="dialogVue">
               <div class="inpVue" style="margin-top: 0;">
                    <div class="label">子账号</div>
                    <el-input v-model="account" readonly style="width: 100%; margin-top: 10px;"></el-input>
               </div>
               <div class="inpVue">
                    <div class="label">分配微信数(个)</div>
                    <el-input v-model="wechatNum" style="width: 100%; margin-top: 10px;" placeholder="请输入分配微信数" type="number"  class="def-input-number"></el-input>
               </div>
               <div class="inpVue">
                    <div class="label">分配token数(个)</div>
                    <el-input v-model="tokenNum" style="width: 100%; margin-top: 10px;" placeholder="请输入分配token数" type="number"  class="def-input-number"></el-input>
               </div>
               <div class="tipTetx">提示：分配给子账号后将不可以更改，分配额度请谨慎选择</div>
               <div class="createBtn margin0" @click="submitFun">
                    <span class="el-icon-loading" v-if="loading"></span>
                    <span v-else>提交</span>
                </div> 
            </div>
        </el-dialog>
    </div>
</template>

<script>
import serviceVue from '@/components/service.vue';
import { toast, copy } from '@/common/tools';
export default {
    components: {
        serviceVue
    },
    data(){
        return {
            key: "",
            list: [],
            total: 0,
            pageNum: 1,
            pageSize: 10,
            dialogTableVisible: false,
            dialogTableVisible10: false,
            dialogTableVisible20: false,
            tokenNum: "",
            loading: false,
            account: "",
            wechatNum: "",
            id: "",
            accountInfo: {
                wechatNum: 0,
                tokenNum: 0,
                levelStr: ""
            },
            link: ""
        }
    },
    created(){
        this.getInfo()
        this.getList()
    },
    methods: {
        handleManage(item){
            this.dialogTableVisible20 = true
            this.account = item.userName
            this.id = item.id
        },

        // 获取邀请链接
        toInvite(){
            this.dialogTableVisible = true
            this.$post("/front/child/inviteLink").then(res=>{
                this.link = res.data.obj
            })
        },

        // 复制邀请链接
        copyLink(){
            copy(this.link)
        },

        // 删除子账号
        handleDelete(item){
            this.$alert(`确认删除子账号${item.userName}?`, '删除子账号', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    if(action==="confirm") {
                        this.$post("/front/child/removeChild", {
                            id: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "删除成功") 
                                this.getList()
                                this.getInfo()
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },

        // 账号信息
        getInfo(){
            this.$post("/front/child/userPackageInfo").then(res=>{
                console.log(res)
                this.accountInfo = res.data.obj
            })
        },

        // 提交
        submitFun(){
            if(!this.wechatNum || this.wechatNum<=0) return toast(1, "请输入正确分配微信数量")
            if(!this.tokenNum || this.tokenNum<=0) return toast(1, "请输入正确分配微信数量")
            if(this.loading) return
            this.loading = true
            this.$post("/front/child/setChildInfo", {
                id: this.id,
                wechatNum: this.wechatNum,
                tokenNum: this.tokenNum
            }).then(res=>{
                if(res.data.code===0) {
                    this.loading = false
                    this.dialogTableVisible20 = false
                    toast(0, "分配成功")
                    this.getList()
                    this.wechatNum = ""
                    this.id = ""
                    this.tokenNum = ""
                }else{
                    this.loading = false
                    toast(1, res.data.msg)
                }
            })
        },

        // 获取子账号列表
        getList(){
            this.$post("/front/child/childList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.el-button--delete) {
    background: #d81e06;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--manage) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}
:deep(.center-table td), 
:deep(.center-table th) {
  text-align: center !important;
}
:deep(.center-table th) {
  background: #f5f5f5 !important;
}
:deep(.el-button--show) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--edit) {
    background: #AAA;
    span {
        color: #fff !important;
    }
}
:deep(.el-dialog) {
    width: 400px;
    height: auto;
    border-radius: 10px;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-dialog__header) {
    padding: 20px 0 0;
}
:deep(.el-dialog__body) {
    padding: 30px 20px;
}

:deep(.inpVue) {
    /* 隐藏el-input的上下箭头 */
    .el-input__inner[type="number"]::-webkit-inner-spin-button,
    .el-input__inner[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none !important;
    }
    /* 对于非WebKit浏览器，可以尝试以下方法 */
    .el-input__inner[type="number"] {
        -moz-appearance: textfield !important; /* Firefox */
    }
}
    
.dialogVue {
    width: 100%;
    border-radius: 5px;
    .inviteVue {
        width: 100%;
        height: 40px;
        .invite {
            flex: 1;
            height: 40px;
            border: 1px solid #DCDFE6;
            padding-left: 15px;
            color: #333;
            margin-left: 10px;
            border-radius: 4px;
            line-height: 40px;
        }
        .label {
            width: 170px;
        }
    }
    .createBtn {
        width: 320px;
        height: 50px;
        border-radius: 6px;
        line-height: 50px;
        text-align: center;
        text-align: center;
        background: #0147fd;
        cursor: pointer;
        span {
            color: #fff;
        }
    }
    .inpVue {
        width: 100%;
        margin-top: 20px;
        .label {
            color: #333;
            font-size: 12px;
        }
    }
    .tipTetx {
        color: #999;
        text-align: center;
        padding: 30px 0;
        font-size: 12px;
    }
}
.accountPage {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0;
    .tip {
        color: #333;
        padding-left: 15px;
        font-weight: 600;
    }
    .selectVue {
        width: 100%;
        height: 50px;
        .btn {
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            background: #0147fd;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
        }
    }
    .btnVue {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        background: #0147fd;
        color: #fff;
        margin-left: 10px;
        font-size: 14px;
        cursor: pointer;
    }
}
.accountContent {
    width: 100%;
    margin-top: 10px;
}
.paginationVue {
    width: 100%;
    height: 60px;
}
</style>